<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>售后服务</title>
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/aftersale.css">
        <link rel="stylesheet" href="http://at.alicdn.com/t/font_2367458_v07p93lvyh.css">
        <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/6.4.5/swiper-bundle.min.css" rel="stylesheet">
    </head>
    <body>
        <header>
            <div class="wrapper">
                <div class="haier-logo">
                    <a href="index.html"><img src="assets/images/haier2020_logo.png" alt=""></a>
                </div>
                <ul class="clear">
                    <li>
                        智能家庭
                        <ul class="hidbox">
                            <li>
                                <a href="">智慧首页</a>
                            </li>
                            <li>
                                <a href="">智慧方案</a>
                            </li>
                            <li>
                                <a href="">智慧家电</a>
                            </li>
                            <li>
                                <a href="">生活资讯</a>
                            </li>
                            <li>
                                <a href="">智慧体验店</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        个人与家用产品
                        <ul class="hidbox">
                            <li>
                                <a href="">智慧首页</a>
                            </li>
                            <li>
                                <a href="">智慧方案</a>
                            </li>
                            <li>
                                <a href="">智慧家电</a>
                            </li>
                            <li>
                                <a href="">生活资讯</a>
                            </li>
                            <li>
                                <a href="">智慧体验店</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        商用解决方案
                        <ul class="hidbox">
                            <li>
                                <a href="">智慧首页</a>
                            </li>
                            <li>
                                <a href="">智慧方案</a>
                            </li>
                            <li>
                                <a href="">智慧家电</a>
                            </li>
                            <li>
                                <a href="">生活资讯</a>
                            </li>
                            <li>
                                <a href="">智慧体验店</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        购买与服务
                        <ul class="hidbox">
                            <li>
                                <a href="aftersale.html">服务支持</a>
                            </li>
                            <li>
                                <a href="">智慧方案</a>
                            </li>
                            <li>
                                <a href="">智慧家电</a>
                            </li>
                            <li>
                                <a href="">生活资讯</a>
                            </li>
                            <li>
                                <a href="">智慧体验店</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        关于海尔
                        <ul class="hidbox">
                            <li>
                                <a href="">智慧首页</a>
                            </li>
                            <li>
                                <a href="">智慧方案</a>
                            </li>
                            <li>
                                <a href="">智慧家电</a>
                            </li>
                            <li>
                                <a href="">生活资讯</a>
                            </li>
                            <li>
                                <a href="">智慧体验店</a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <div class="search-box">
                        <div class="search-item">
                            <i class="iconfont icon-fangdajing"></i>
                            <input type="text" placeholder="找点什么... ">
                        </div>
                        <a href="#"><i class="iconfont icon-gouwuche"></i></a>
                        <a href="sign.html"><i class="iconfont icon-yonghu-user"></i></a>
                </div> 
            </div>
    </header>

        <section class="main">
            <div class="banner">
                <div class="banner-text">
                    <h1>管家式服务</h1>
                    <p>引领行业标杆</p>
                    <span>了解更多></span>
                </div>
                <img src="assets/images/aftersale.png" alt="">
            </div>

            <div class="dest">
                <a href="#"><sapn>首页</sapn></a>
                <i>></i>
                <sapn>购买与服务</sapn>
                <i>></i>
                <a href="#"><sapn>服务与支持</sapn></a> 
            </div>

            <div class="fast-service">
                <div class="service-box">
                    <h1>快速服务入口</h1>
                    <div class="service-search">
                        <div class="search-box">
                            <div class="search-left">
                                <input type="text" placeholder="请输入您所需服务的关键词">
                            </div>
                            <div class="search-right">
                                <i class="iconfont icon-fangdajing1"></i>
                            </div>
                        </div>
                    </div>
                    <h1>自助服务</h1>
                </div>
            </div>

            <div class="selfservice-box">
                <div class="selfmain-box">
                    <div class="selfmain-l">
                        <h3>
                            我要认证
                        </h3>
                        <p>
                            对您购买的海尔产品进行产品认证，有助于后续我们为您提供高效优质的服务。
                        </p>
                        <button>立即认证</button>
                    </div>
                    <div class="selfmain-r">
                        <div class="order">
                            <div class="order-box">
                                <i>
                                    <img src="assets/images/order1.png" alt="">
                                </i>
                                <div class="order-text">
                                    <h2>我要安装</h2>
                                    <p>
                                        产品到货后，您可以随时联系海尔专业人士上门安装。  
                                    </p>
                                    <button>
                                        立即预约
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="order">
                            <div class="order-box">
                                <i>
                                    <img src="assets/images/order1.png" alt="">
                                </i>
                                <div class="order-text">
                                    <h2>我要安装</h2>
                                    <p>
                                        产品到货后，您可以随时联系海尔专业人士上门安装。  
                                    </p>
                                    <button>
                                        立即预约
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="order">
                            <div class="order-box">
                                <i>
                                    <img src="assets/images/order1.png" alt="">
                                </i>
                                <div class="order-text">
                                    <h2>我要安装</h2>
                                    <p>
                                        产品到货后，您可以随时联系海尔专业人士上门安装。  
                                    </p>
                                    <button>
                                        立即预约
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="order">
                            <div class="order-box">
                                <i>
                                    <img src="assets/images/order1.png" alt="">
                                </i>
                                <div class="order-text">
                                    <h2>我要安装</h2>
                                    <p>
                                        产品到货后，您可以随时联系海尔专业人士上门安装。  
                                    </p>
                                    <button>
                                        立即预约
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


            </div>

            <div class="service-tab">
                <ul class="service-list">
                    <li>服务状态</li>
                    <li>服务状态</li>
                    <li>服务状态</li>
                    <li>服务状态</li>
                    <li>服务状态</li>
                </ul>
    
                <div class="query clear">
                    <span>
                        仅针对当前服务记录查询，想看完整服务记录写评价赢好礼？
                    </span>
                    <a href="#">
                        去登录 >
                    </a>
    
                    <div class="number-input">
                        <input type="text" placeholder="请输入联系人手机号码">
                    </div>
    
                    <div class="imgverify-input">
                        <input type="text" placeholder="请输入图形验证码" maxlength="5">
                        <img src="assets/images/yanzm.jpg" alt="">
                        <a href="">换一换</a> 
                    </div>
    
                    <div class="messagevf-input clear">
                        <input type="text" placeholder="请输入短信验证码" maxlength="6">
                        <div class="messagevf-box">
                            获取验证码
                        </div>
                    </div>
                </div>
    
                <button class="querybtn">
                    立即查询
                </button>
            </div>

            <div class="product-support">
                <div class="support-text">
                    <h1>
                        产品支持
                    </h1>
                    <p>
                        产品支持中心提供各项下载服务，包括官方正版的APP、电脑驱动及产品说明书的下载。
                    </p>
                </div>

                <div class="support-imgs">
                    <div class="service-help">
                        <h2>APP下载</h2>
                        <p>海尔智家、优水、安住、安图等移动端官方应用下载</p>
                    </div>
                    <div class="service-help">
                        <h2>APP下载</h2>
                        <p>海尔智家、优水、安住、安图等移动端官方应用下载</p>
                    </div>
                    <div class="service-help">
                        <h2>APP下载</h2>
                        <p>海尔智家、优水、安住、安图等移动端官方应用下载</p>
                    </div>
                </div>
            </div>

            <div class="support-text">
                <h1>
                    产品使用与保养
                </h1>
                <p>
                    请选择您关注的产品类别，我们将为您提供该类产品的日常使用保养知识与常见故障排除办法
                </p>
            </div>

            <div class="device">
                <div class="swiper-container" role="none" aria-label="none">
                    <div class="swiper-wrapper" style="width: 1729px; height: 250px; transform: translate3d(0px, 0px, 0px); transition-duration: 0.3s;" role="none" aria-label="none">
                        <div class="swiper-slide swiper-slide-visible" style="width: 216px; height: 250px;" role="none" aria-label="none">
                            <a href="#">
                                <div class="slide-box">
                                    <img src="assets/images/slide1.png" alt="">
                                    <p>
                                        冰箱冷柜
                                    </p>
                                </div>
                            </a>
                        </div>
                        <div class="swiper-slide swiper-slide-visible" style="width: 216px; height: 250px;" role="none" aria-label="none">
                            <a href="#">
                                <div class="slide-box">
                                    <img src="assets/images/slide1.png" alt="">
                                    <p>
                                        冰箱冷柜
                                    </p>
                                </div>
                            </a>
                        </div>
                        <div class="swiper-slide swiper-slide-visible" style="width: 216px; height: 250px;" role="none" aria-label="none">
                            <a href="#">
                                <div class="slide-box">
                                    <img src="assets/images/slide1.png" alt="">
                                    <p>
                                        冰箱冷柜
                                    </p>
                                </div>
                            </a>
                        </div>
                        <div class="swiper-slide swiper-slide-visible" style="width: 216px; height: 250px;" role="none" aria-label="none">
                            <a href="#">
                                <div class="slide-box">
                                    <img src="assets/images/slide1.png" alt="">
                                    <p>
                                        冰箱冷柜
                                    </p>
                                </div>
                            </a>
                        </div>
                        <div class="swiper-slide swiper-slide-visible" style="width: 216px; height: 250px;" role="none" aria-label="none">
                            <a href="#">
                                <div class="slide-box">
                                    <img src="assets/images/slide1.png" alt="">
                                    <p>
                                        冰箱冷柜
                                    </p>
                                </div>
                            </a>
                        </div>
                        <div class="swiper-slide" style="width: 216px; height: 250px;" role="none" aria-label="none">
                            <a href="#">
                                <div class="slide-box">
                                    <img src="assets/images/slide1.png" alt="">
                                    <p>
                                        冰箱冷柜
                                    </p>
                                </div>
                            </a>
                        </div>
                        <div class="swiper-slide" style="width: 216px; height: 250px;" role="none" aria-label="none">
                            <a href="#">
                                <div class="slide-box">
                                    <img src="assets/images/slide1.png" alt="">
                                    <p>
                                        冰箱冷柜
                                    </p>
                                </div>
                            </a>
                        </div>
                        <div class="swiper-slide" style="width: 216px; height: 250px;" role="none" aria-label="none">
                            <a href="#">
                                <div class="slide-box">
                                    <img src="assets/images/slide1.png" alt="">
                                    <p>
                                        冰箱冷柜
                                    </p>
                                </div>
                            </a>
                        </div>  
                    </div>
                    
                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                    
                </div>  
            </div>
        </section>

        <footer>
            <div class="ft-wrapper">
                <div class="ft-list">
                    <ul>
                        <li>智慧家庭</li>
                        <li><a href="">智慧首页</a></li>
                        <li><a href="">智慧首页</a></li>
                        <li><a href="">智慧首页</a></li>
                        <li><a href="">智慧首页</a></li>
                        <li><a href="">智慧首页</a></li>
                    </ul>
                    <ul>
                        <li>个人与家用产品</li>
                        <li><a href="">冰箱</a></li>
                        <li><a href="">冰箱</a></li>
                        <li><a href="">冰箱</a></li>
                        <li><a href="">冰箱</a></li>
                        <li><a href="">冰箱</a></li>
                        <li><a href="">冰箱</a></li>
                        <li><a href="">冰箱</a></li>
                        <li><a href="">冰箱</a></li>
                        <li><a href="">冰箱</a></li>
                        <li><a href="">冰箱</a></li>
                        <li><a href="">冰箱</a></li>
                    </ul>
                    <ul>
                        <li>商用解决方案</li>
                        <li><a href="">中央空调</a></li>
                        <li><a href="">中央空调</a></li>
                        <li><a href="">中央空调</a></li>
                        <li><a href="">中央空调</a></li>
                        <li><a href="">中央空调</a></li>
                        <li><a href="">中央空调</a></li>
                        <li><a href="">中央空调</a></li>
                        <li><a href="">中央空调</a></li>
                    </ul>
                    <ul>
                        <li>购买与服务</li>
                        <li><a href="">产品导购</a></li>
                        <li><a href="">产品导购</a></li>
                        <li><a href="">产品导购</a></li>
                        <li><a href="">产品导购</a></li>
                    </ul>
                    <ul>
                        <li>关于海尔</li>
                        <li><a href="">海尔品牌</a></li>
                        <li><a href="">海尔品牌</a></li>
                        <li><a href="">海尔品牌</a></li>
                    </ul>
                    <ul>
                        <li>友情链接</li>
                        <li><a href="">智慧生活体验馆</a></li>
                        <li><a href="">智慧生活体验馆</a></li>
                        <li><a href="">智慧生活体验馆</a></li>
                        <li><a href="">智慧生活体验馆</a></li>
                    </ul>
                </div>

                <div class="ft-bottom">
                    <div class="b-left">
                        <a href="">
                            关于海尔
                        </a>
                        <span>|</span>
                        <a href="">
                            关于海尔
                        </a>
                        <span>|</span>
                        <a href="">
                            关于海尔
                        </a>
                        <span>|</span>
                        <a href="">
                            关于海尔
                        </a>
                    </div>
                    <div class="b-middle">
                        <a href="">
                            鲁ICP备09096283号-1
                        </a>
                        <span>
                            |
                        </span>
                        <span>
                            © 2000-2021 Haier.com. All rights reserved.
                        </span>
                    </div>
                    <div class="b-right">
                        <span>
                            Haier 全球网站群 · 中国
                        </span>
                        <span>
                            关注海尔
                        </span>
                        <i class="iconfont icon-weixin"></i>
                    </div>
                </div>
            </div>
        </footer>

        <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/6.4.5/swiper-bundle.min.js"></script>
        <script>        
            var mySwiper = new Swiper ('.swiper-container', {
              loop: false, // 循环模式选项
              
              
              pagination: {
                el: '.swiper-pagination',
              },
              
            //   如果需要前进后退按钮
              navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
              },

            })        
            </script>
    </body>
</html>